<template>
	<view class="baselv">
		<view class="ul">
			<view class="li">
				<view class="msg" @tap="onetree">
					<image src="/static/img/bottom.png" :class="{ avtive:fold}"/>
					<text class="name" >{{datalist.agentName}}</text>
					<text class="lv">{{datalist.agentLevel}}</text>
					<text class="right">本人团队人数：{{datalist.total}}人</text>
				</view>
				<view class="number">编号：{{datalist.agentSn}}</view>

				<view class="sublevel" v-if="datalist.children&&fold">
					<view class="list" v-for="(item, index) in datalist.children" :key="index">
						<view class="msg" @click.stop="openExpand(item)">
							<image src="/static/img/bottom.png" :class="{ avtive:item.isExpand}" v-if="datalist.children"/>
							<text class="name">{{item.agentName}}</text>
							<text class="lv">{{item.agentLevel}}</text>
							<text class="right">团队人数：{{item.total}}人</text>
						</view>
						<view class="number">编号：{{item.agentSn}}{{item.fold}}</view>

						<view class="sublevel" v-if="item.children.length>0 && item.isExpand">
							<view class="list" v-for="(item1, index) in item.children" :key="index">
								<view class="msg" @click.stop="openExpand(item1)">
									<image src="/static/img/bottom.png" :class="{ avtive:item1.isExpand}" v-if="item1.children.length>0"/>
									<text class="name">{{item1.agentName}}</text>
									<text class="lv">{{item1.agentLevel}}</text>
								</view>
								<view class="number">编号：{{item1.agentSn}}</view>

								<view class="sublevel" v-if="item1.children.length>0&& item1.isExpand">
									<view class="list" v-for="(item2, index) in item1.children" :key="index">
										<view class="msg">
											
											<text class="name">{{item2.agentName}}</text>
											<text class="lv">{{item2.agentLevel}}</text>
										</view>
										<view class="number">编号：{{item2.agentSn}}</view>
									</view>
								</view>


							</view>
						</view>


					</view>

				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import {
		uniIcons
	} from '@dcloudio/uni-ui';
	import index from '../../servers/agent/index.js'
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				datalist: '',
				active: 0,
				fold: false
			};
		},
		mounted() {

			this._revenue();



		},

		methods: {
			openExpand(item) {
				item.isExpand=!item.isExpand
				// if (item.isExpand) {
				// 	// this.$set(item,'isExpand',false)
				// 	item.isExpand = false

				// } else {
				// 	// this.$set(item,'isExpand',true)
				// 	item.isExpand = true
				// }
				console.log(item, this.datalist)

			},
			// treedata() {
			// 	let reduceDataFunc = (data, level) => {
			// 		data.map((m, i) => {
			// 			m.isExpand = m.isExpand || false
			// 			m.children = m.children || []
			// 			m.level = level
			// 			if (m.children.length > 0) {
			// 				reduceDataFunc(m.children, level + 1)
			// 			}

			// 		})
			// 	}
			// 	reduceDataFunc(this.datalist.children, 0)
			// 	console.log(this.datalist)
			// },


			_revenue() {
				uni.showLoading({
					title: '数据加载中'
				})
				index.tree().then(res => {
						// console.log(res.data)
						if (res.data) {
							uni.hideLoading();
							this.datalist = res.data;
							this.datalist.children = res.data.children.map((m, i) => {
								// m.isExpand = m.isExpand || false
								m.children = m.children || []
								if (m.isExpand) {
									this.$set(m, 'isExpand', m.isExpand)
								} else {
									this.$set(m, 'isExpand', false)
								}
								
								if (m.children.length > 0) {
									
									m.children = m.children.map((m, i) => {
										// m.isExpand = m.isExpand || false
										m.children = m.children || []									
										if (m.isExpand) {
											this.$set(m, 'isExpand', m.isExpand)
										} else {
											this.$set(m, 'isExpand', false)
										}
										return m;
									})
								}
								return m;
							})
							// this.treedata();



							// this.datalist.children=this.datalist.children.map(item => {
							// 	item.fold = false;
							// 	// return item;
							// 	console.log(item)
							// 	item.children=item.children.map(item1 => {
							// 		item1.fold = false;
							// 		  return item1
							// 		console.log(item1)
							// 		item1.children=item1.children.map(item2 => {
							// 			item2.fold = false;
							// 			  return item2
							// 			console.log(item2)
							// 			item2.children=item2.children.map(item3 => {
							// 				item3.fold = false;
							// 				  return item3
							// 			console.log(item3)
							// 			})
							// 		})
							// 	})
							// 	return item;
							// })
							console.log(this.datalist)





						}
						// console.log(this.datalist)

					})
					.catch(err => {
						console.log(err);
					});
			},

			onetree() {
				this.fold = !this.fold;

			},


		}
	};
</script>

<style lang="less" scoped>
	.mar30{
		margin-left: 60rpx;
	}
	.baselv {
		.ul {
			background: #ffffff;

			.li {
				.msg {
					font-size: 30rpx;
					padding: 52rpx 20rpx 0;

					image {
						width: 26rpx;
						height: 22rpx;
						margin-right: 26rpx;
						transform: rotate(-90deg);
					}

					image.avtive {
						transform: rotate(0deg);
					}

					.name {
						margin-right: 30rpx;
					}

					.right {
						font-size: 26rpx;
						color: #999999;
					}
				}

				.number {
					font-size: 28rpx;
					color: #999999;
					margin-top: 28rpx;
					padding: 0rpx 20rpx 46rpx 72rpx;
				}

				.sublevel {
					padding: 0 20rpx 0 108rpx;
					background: #fff1fa;

					.msg {
						color: #bd3c8c;

						.right {
							color: #e08ec1;
						}
					}

					.number {
						color: #e08ec1;
					}
				}
			}
		}
	}
</style>
